import React from 'react';
import { CheckCircle, Clock, XCircle, AlertCircle, User, Calendar, MessageSquare } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

// 审批时间线项目组件
const ApprovalTimelineItem = ({ 
  step, 
  index, 
  isLast = false, 
  isCurrent = false,
  canApprove = false,
  onApprove,
  onReject,
  onReturn 
}) => {
  // 获取步骤状态图标
  const getStepIcon = () => {
    if (step.status === 'approved') {
      return <CheckCircle className="size-4 text-green-500" />;
    } else if (step.status === 'rejected') {
      return <XCircle className="size-4 text-red-500" />;
    } else if (step.status === 'returned') {
      return <AlertCircle className="size-4 text-orange-500" />;
    } else if (isCurrent) {
      return <Clock className="size-4 text-blue-500" />;
    } else {
      return <Clock className="size-4 text-gray-400" />;
    }
  };

  // 获取步骤状态徽章
  const getStepBadgeVariant = () => {
    switch (step.status) {
      case 'approved': return 'success';
      case 'rejected': return 'destructive';
      case 'returned': return 'secondary';
      case 'pending': return 'default';
      default: return 'outline';
    }
  };

  // 获取步骤状态文本
  const getStepStatusText = () => {
    switch (step.status) {
      case 'approved': return '已通过';
      case 'rejected': return '已拒绝';
      case 'returned': return '已退回';
      case 'pending': return '待审批';
      default: return '待审批';
    }
  };

  // 获取图标背景颜色
  const getIconBgColor = () => {
    if (step.status === 'approved') {
      return 'bg-green-100 border-green-200';
    } else if (step.status === 'rejected') {
      return 'bg-red-100 border-red-200';
    } else if (step.status === 'returned') {
      return 'bg-orange-100 border-orange-200';
    } else if (isCurrent) {
      return 'bg-blue-100 border-blue-200';
    } else {
      return 'bg-gray-100 border-gray-200';
    }
  };

  return (
    <div className="flex items-start relative">
      {/* 时间线连接线 */}
      {!isLast && (
        <div className="w-9 start-0 top-9 absolute bottom-0 rtl:-translate-x-1/2 translate-x-1/2 border-s border-s-input"></div>
      )}
      
      {/* 时间线图标 */}
      <div className={`flex items-center justify-center shrink-0 rounded-full border size-9 ${getIconBgColor()}`}>
        {getStepIcon()}
      </div>
      
      {/* 内容区域 */}
      <div className="ps-2.5 mb-7 text-base grow">
        <div className="space-y-3">
          {/* 审批人信息 */}
          <div className="flex items-center gap-2">
            <span className="font-medium text-sm">{step.approver_name}</span>
            <Badge variant={getStepBadgeVariant()} className="text-xs">
              {getStepStatusText()}
            </Badge>
            {isCurrent && step.status === 'pending' && (
              <Badge variant="default" className="text-xs">
                当前步骤
              </Badge>
            )}
          </div>
          
          {/* 角色和时间信息 */}
          <div className="text-sm text-muted-foreground">
            <div className="flex items-center gap-4">
              <span className="flex items-center gap-1">
                <User className="size-3" />
                {step.role_name}
              </span>
              {step.approved_at && (
                <span className="flex items-center gap-1">
                  <Calendar className="size-3" />
                  {step.approved_at}
                </span>
              )}
            </div>
          </div>
          
          {/* 审批意见 */}
          {step.comment && (
            <div className="text-sm bg-muted/50 rounded p-3">
              <div className="flex items-start gap-2">
                <MessageSquare className="size-4 text-muted-foreground mt-0.5 flex-shrink-0" />
                <div>
                  <span className="font-medium text-muted-foreground">审批意见：</span>
                  <span className="text-foreground">{step.comment}</span>
                </div>
              </div>
            </div>
          )}
          
          {/* 审批操作按钮 */}
          {canApprove && isCurrent && step.status === 'pending' && (
            <div className="flex items-center gap-2 pt-2">
              <button
                onClick={() => onApprove && onApprove()}
                className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-green-700 bg-green-100 border border-green-200 rounded-md hover:bg-green-200 transition-colors"
              >
                <CheckCircle className="size-3" />
                通过
              </button>
              <button
                onClick={() => onReject && onReject()}
                className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-red-700 bg-red-100 border border-red-200 rounded-md hover:bg-red-200 transition-colors"
              >
                <XCircle className="size-3" />
                拒绝
              </button>
              <button
                onClick={() => onReturn && onReturn()}
                className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-orange-700 bg-orange-100 border border-orange-200 rounded-md hover:bg-orange-200 transition-colors"
              >
                <AlertCircle className="size-3" />
                退回
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// 审批时间线组件
const ApprovalTimeline = ({ 
  approvalSteps = [], 
  currentStep = 0, 
  onApprove, 
  onReject, 
  onReturn,
  canApprove = false,
  canReject = false,
  canReturn = false 
}) => {
  return (
    <div className="space-y-0">
      {approvalSteps.map((step, index) => (
        <ApprovalTimelineItem
          key={index}
          step={step}
          index={index}
          isLast={index === approvalSteps.length - 1}
          isCurrent={index === currentStep}
          canApprove={canApprove}
          onApprove={onApprove}
          onReject={onReject}
          onReturn={onReturn}
        />
      ))}
    </div>
  );
};

export default ApprovalTimeline; 